<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #ts {
      width: 100%;
    }

    #rs {
      width: 100%;
    }

    .ts_ul li {
      width: 23%;
      height: 651px;
    }

    #ts li img {
      width: 100%;
    }

    .ts_ul:nth-child(odd) {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 230px;
      padding-right: 12%;
    }

    .ts_ul:nth-child(even) {
      display: flex;
      justify-content: end;
      padding-left: 12%;
    }

    .ts_ul:nth-child(even) li {
      margin-right: 15px;
    }

    .ts_ul:nth-child(odd) li {
      margin-left: 15px;
    }

    .ts_txt {
      height: 120px;

    }

    .ts_txt .ts_jg {
      height: 60px;
      background-image: url(https://img.xiaohucloud.com/res/100474/2020/11/25/100474-tYLKum.png);
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      width: 100%;
      line-height: 60px;
      font-size: 18px;
      color: #534741;

    }

    #ts .ts_sp {
      padding: 20px 0;
      box-sizing: border-box;
      color: #534741;
      font-size: 20px;
    }


    /*分页*/
    /* 分页 */
    .page_div {
      margin-top: 100px;
      margin-bottom: 20px;
      font-size: 15px;
      font-family: "microsoft yahei";
      color: #666666;
      margin-right: 10px;
      padding-left: 20px;
      box-sizing: border-box;
      text-align: center;
    }

    /*
			 * 页数按钮样式
			 */

    .page_div a {
      min-width: 40px;
      height: 40px;
      text-align: center;
      margin: 0 4px;
      cursor: pointer;
      line-height: 40px;
      color: #999999;
      background-color: #EEEEEE;
      font-size: 13px;
      display: inline-block;
    }

    #firstPage,
    #lastPage {
      width: 50px;
      color: #999999;
      background-color: #EEEEEE;
    }

    #prePage,
    #nextPage {
      width: 70px;
      color: #999999;
      background-color: #EEEEEE;
    }

    .page_div .current {
      background-color: #565656;
      color: #FFFFFF;
    }

    .totalPages {
      margin: 0 10px;
    }

    .totalPages span,
    .totalSize span {
      color: #0073A9;
      margin: 0 5px;
    }
  </style>
</head>

<body>
  <div id="ts">
    <div id="rs">


    </div>
    <div id="page" class="page_div"></div>
  </div>
  <script>
    /*#mc16jnxob0sg0000000{*/
    /*    width: 100%!important;*/
    /*    height: 100%!important;*/
    /*    margin: 0 auto;*/
    /*}*/

    /*#mc16jnxob0sg0000000 .swiper-wrapper{*/
    /*    width: 100%!important;*/
    /*height: 475px!important;*/

    /*}*/
    /*#mc16jnxob0sg0000000  .swiper-wrapper .swiper-slide{*/
    /*    width: 100%!important;*/
    /*}*/
    /*#mc16jnxob0sg0000000 .multiCarousel .swiper-slide img{*/
    /*    min-height: 400px;*/
    /*    min-width: 1200px;*/
    /*}*/

    /*#m3abwnczhrx400000000{*/
    /*    margin-top: -155px;*/
    /*}*/

    /*#m3abwnczhrx400000000 .layout_inner {*/
    /*    height: 100%!important;*/
    /*}*/


    /*#m3abwnczhrx400000000 .layout_inner .vdr:nth-child(2){*/
    /*    position: relative!important;*/
    /*    height: 100%!important;*/
    /*}*/

  </script>

  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

  <script>


    // $.ajax({
    //   type: "get", //数据发送的方式（post 或者 get）
    //   url: "https://api.xiaohucloud.com/api/data/productListByCategoryIds", //要发送的后台地址
    //   data: {
    //     companyId: 100474,
    //     ids: 5022,
    //     limit: 999,
    //     // page:page,
    //     token: 'a05775f0aa884f49b40f234907cbc6e2kdrEPb',
    //     lang: 'cn',
    //     type: 1,
    //     versionId: 2692,
    //     version_id: 2692
    //   }, //要发送的数据（参数）格式为{'val1':"1","val2":"2"}
    //   dataType: "json", //后台处理后返回的数据格式
    //   success: function (res) { //ajax请求成功后触发的方法
    //     console.log(res);
    //   }
    // })

    gettss();
    var page = 1;
    var curPage = 1;
    // https://open.xiaohucloud.cn/xhyapi/data/productListByCategoryIds?companyId=100474&ids=5032
    function gettss(page) {
      $.ajax({
        type: "get", //数据发送的方式（post 或者 get）
        url: "https://open.xiaohucloud.cn/xhyapi/data/productListByCategoryIds", //要发送的后台地址
        data: {
          companyId: "100474",
          ids: "5022",
          limit: 6,
          page: page,
        }, //要发送的数据（参数）格式为{'val1':"1","val2":"2"}
        dataType: "json", //后台处理后返回的数据格式
        success: function (res) { //ajax请求成功后触发的方法
          if (res.code === 0) {
            console.log(res);
            var list = [];
            var lost = [];
            for (var i = 0; i < res.data.data.length; i += 3) {

              list.push(res.data.data.slice(i, i + 3));

            }
            console.log(list);

            for (var x = 0; x < list.length; x++) {
              lost.push(list[x]);

            }
            console.log(lost); // [arr1,arr2]
            var str = '';
            for (var j = 0; j < lost.length; j++) {
              str += `<ul class="ts_ul">`
              for (var n = 0; n < lost[j].length; n++) {
                console.log(lost[j][n].price);
                if (lost[j][n].price) {
                  lost[j][n].price = lost[j][n].price
                } else {
                  lost[j][n].price = '暂无定价'
                }
                str += `<li><a href="http://geyuciga.com/product/${lost[j][n].id}.html"><img src="${lost[j][n].image}"/><div class="ts_txt"><div class="ts_sp">${lost[j][n].name}</div><div class="ts_jg">￥${lost[j][n].price}</div></div></a></li>`

              }
              str += `</ul>`
            }



            $("#rs").html(str);
            $("#page").paging({
              pageNo: curPage,
              totalPage: res.data.last_page,
              totalSize: res.data.total,
              callback: function (num) {
                curPage = num;
                console.log(num)
                gettss(num)
              }
            })


          } else {

          }
        }

      });
    }

    // 分页插件代码
    (function ($, window, document, undefined) {
      //定义分页类
      function Paging(element, options) {
        this.element = element;
        //传入形参
        this.options = {
          pageNo: options.pageNo || 1,
          totalPage: options.totalPage,
          totalSize: options.totalSize,
          callback: options.callback
        };
        //根据形参初始化分页html和css代码
        this.init();
      }
      //对Paging的实例对象添加公共的属性和方法
      Paging.prototype = {
        constructor: Paging,
        init: function () {
          this.creatHtml();
          this.bindEvent();
        },
        creatHtml: function () {
          var me = this;
          var content = "";
          var current = me.options.pageNo;
          var total = me.options.totalPage;
          var totalNum = me.options.totalSize;
          content += "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
          //总页数大于6时候
          if (total > 6) {
            //当前页数小于5时显示省略号
            if (current < 5) {
              for (var i = 1; i < 6; i++) {
                if (current == i) {
                  content += "<a class='current'>" + i + "</a>";
                } else {
                  content += "<a>" + i + "</a>";
                }
              }
              content += ". . .";
              content += "<a>" + total + "</a>";
            } else {
              //判断页码在末尾的时候
              if (current < total - 3) {
                for (var i = current - 2; i < current + 3; i++) {
                  if (current == i) {
                    content += "<a class='current'>" + i + "</a>";
                  } else {
                    content += "<a>" + i + "</a>";
                  }
                }
                content += ". . .";
                content += "<a>" + total + "</a>";
                //页码在中间部分时候	
              } else {
                content += "<a>1</a>";
                content += ". . .";
                for (var i = total - 4; i < total + 1; i++) {
                  if (current == i) {
                    content += "<a class='current'>" + i + "</a>";
                  } else {
                    content += "<a>" + i + "</a>";
                  }
                }
              }
            }
            //页面总数小于6的时候
          } else {
            for (var i = 1; i < total + 1; i++) {
              if (current == i) {
                content += "<a class='current'>" + i + "</a>";
              } else {
                content += "<a>" + i + "</a>";
              }
            }
          }
          content += "<a id='nextPage'>下一页</a>";
          content += "<a id=\"lastPage\">尾页</a>";

          me.element.html(content);
        },
        //添加页面操作事件
        bindEvent: function () {
          var me = this;
          me.element.off('click', 'a');
          me.element.on('click', 'a', function () {
            var num = $(this).html();
            var id = $(this).attr("id");
            if (id == "prePage") {
              if (me.options.pageNo == 1) {
                me.options.pageNo = 1;
              } else {
                me.options.pageNo = +me.options.pageNo - 1;
              }
            } else if (id == "nextPage") {
              if (me.options.pageNo == me.options.totalPage) {
                me.options.pageNo = me.options.totalPage
              } else {
                me.options.pageNo = +me.options.pageNo + 1;
              }

            } else if (id == "firstPage") {
              me.options.pageNo = 1;
            } else if (id == "lastPage") {
              me.options.pageNo = me.options.totalPage;
            } else {
              me.options.pageNo = +num;
            }
            me.creatHtml();
            if (me.options.callback) {
              me.options.callback(me.options.pageNo);
            }
          });
        }
      };
      //通过jQuery对象初始化分页对象
      $.fn.paging = function (options) {
        return new Paging($(this), options);
      }
    })(jQuery, window, document);


  </script>
</body>

</html>